<template>
  <div class="as-header flex justify-between items-center px-4 text-[14px] text-[#fff] bg-[#000]">
    <div v-if="adType === 'video'" class="left" @click="switchVoice(!open)">
      <image v-if="open" src="@/static/images/voice.png" mode="widthFix" class="w-[20px]"></image>
      <image v-else src="@/static/images/silence.png" mode="widthFix" class="w-[20px]"></image>
    </div>
    <div v-else class="left">
      <span>广告</span>
      <image src="@/static/images/arrow-bottom.png" mode="widthFix" class="w-[12px] ml-2"></image>
    </div>
    <div v-if="isOver" class="right" @click="handleSuccess">
      领取成功
      <image class="close w-[10px]" src="@/static/images/close.png" mode="widthFix"></image>
    </div>
    <div v-else class="right">
      <span>{{ count }}</span>
      S后领取奖励
    </div>
  </div>

</template>

<script setup lang="ts">
import NsOverlay from '@/components/ns-overlay.vue'
const props = defineProps({
  // 广告类型 video：视频；text：图文
  adType: {
    type: String,
    default: 'video',
  },
  // 倒计时
  timeCount: {
    type: Number,
    default: 30,
  },
  getSuccess: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['switch', 'success'])

const open = ref(true)
// 打开/关闭声音
function switchVoice(isVoice: boolean) {
  open.value = isVoice
  emit('switch', isVoice)
}

// 倒计时结束
const isOver = ref(false)
function handleSuccess() {
  emit('success')
}
let timer
const count = ref(props.timeCount)

const successVisible = ref(false)

const onOk = () => {
  uni.navigateBack({
    delta: 2,
  })
}
onMounted(() => {
  // 开始倒计时
  timer = setInterval(() => {
    count.value -= 1
    if (count.value === 1) {
      clearInterval(timer)
      setTimeout(() => {
        // successVisible.value = props.getSuccess
        isOver.value = true
        emit('success')
      }, 1000)
    }
  }, 1000)
})
</script>
<style scoped>
.as-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 750rpx;
  height: 96rpx;
  box-sizing: border-box;
}

.as-header .right {
  padding: 8rpx 20rpx;
  border-radius: 122px;
  box-sizing: border-box;
  border: 1px solid #ffffff;
}

.close {
  vertical-align: initial;
}
</style>
